<template>
  <div>
    <div class="top-msg" >
      <mt-search v-model="searchValue" style="height: 3.2rem" @keyup.enter.native="searchSku()"></mt-search>
      <!--<mt-cell >-->
        <!--<div slot="title">-->
          <!--<div class="baohuo-no">报货单号：{{bhId}}</div>-->
          <!--<div class="sku-num">sku：{{skuNum}}</div>-->
          <!--&lt;!&ndash;<div class="bh-time">{{bhTime}}</div>&ndash;&gt;-->
        <!--</div>-->
        <!--<div>-->
          <!--<mt-button type="primary" @click="downExcel()">下载Excel</mt-button>-->
        <!--</div>-->

      <!--</mt-cell>-->
      <mt-navbar v-model="selected" style="z-index: 1999;">
        <mt-tab-item id="1" @click="allTag">全部（sku:{{totalSku}} 共{{total}}件）</mt-tab-item>
        <mt-tab-item id="2" @click="unKnowTag">未处理（{{unKnowSku}}）</mt-tab-item>
      </mt-navbar>
    </div>
        <div class="page-cell" style="padding-top: 6.5rem;padding-bottom: 3rem">
          <ul
            v-infinite-scroll="loadMore"
            infinite-scroll-disabled="loading"
            infinite-scroll-distance="10">
            <li v-for="item in list" @click="swipClicked()">
              <mt-cell-swipe
                :right="[
            {
      content: '有货',
      style: { background: 'green', color: '#fff', height:'100%' },
      handler: () => hasHuo(item)
    },
    {
      content: '缺货',
      style: { background: 'red', color: '#fff' },
      handler: () => noHuo(item)
    }
  ]" is-link>
                <div slot="title" class="cell-div">
                  <div class="huohao">
                    货号:{{item.skuCode}}
                  </div>
                  <div class="quantity">
                    x{{item.number}}
                  </div>
                  <div class="colorSize">
                    {{item.colorSize}}
                  </div>
                </div>
                <!--<span slot="title">货号：5090  数量：3<br/>-->
                <!--如图；xL<br/>-->
                <!--如图；xL<br/>-->
                <!--如图；xL<br/>-->
                <!--如图；xL-->
                <!--</span>-->
                <span v-if="item.stockInfo==0" class="font-hui">
              未知
            </span>
                <span v-if="item.stockInfo==1" class="font-success">
              有货
            </span>
                <span v-if="item.stockInfo==2" class="font-danger">
              缺货
            </span><span v-if="item.stockInfo==3" class="font-success">
              批处理
            </span>

              </mt-cell-swipe>
            </li>
          </ul>
        </div>


    <mt-tab-container v-model="selected">
      <mt-tab-container-item id="1">
        <div style="height: 3rem;position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 100;
background-color: white;
text-align: center;
">
          <mt-button style="border-radius:30px;margin-top: 0.1rem" @click="downExcel()" type="primary">导出Excel</mt-button>
          <mt-button style="border-radius:30px;margin-top: 0.1rem;background-color:#ff9900;color:#fff;" @click="openKuaijie()" type="default">快捷操作   <mt-badge style="background-color: red" size="small">荐</mt-badge></mt-button>
        </div>
      </mt-tab-container-item>
      <mt-tab-container-item id="2">
        <div style="height: 3rem;position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 100;
background-color: white;
text-align: center;
">
          <mt-button style="border-radius:30px;margin-top: 0.1rem;background-color: green;color: white" type="default" @click="allhasstock()">全部有货</mt-button>
          <mt-button style="border-radius:30px;margin-top: 0.1rem" type="danger" @click="allnostock()">全部缺货</mt-button>
        </div>
      </mt-tab-container-item>
    </mt-tab-container>


    <mt-popup
      v-model="popupVisible"
      position="right"
      style="width: 100%;height: 100%"
    >
      <div class="detail-titlediv" >
        <mt-cell class="detail-titlecell">
          <span slot="title">货号：{{selectedItem.skuCode}}  数量:{{selectedItem.number}}</span>
          <span>{{selectedItem.colorSize}}</span>
        </mt-cell>
      </div>
      <mt-field label="拥有现货" placeholder="输入现货数量" type="number" v-model="nowStock"></mt-field>
      <mt-field label="备注" placeholder="输入有货时间或缺货情况" type="textarea" rows="4" v-model="nostockRemark"></mt-field>
      <mt-checklist
        v-model="unsale"
        :options="checkoptions"
      >
      </mt-checklist>

      <div class="detail-sub">
        <mt-button type="primary" @click="submitNoHuo()" class="sure-tuihuo" >确定</mt-button>
        <mt-button type="default" @click="returnNoHuo()" >返回</mt-button>
      </div>
    </mt-popup>
  </div>
</template>
<script>
  import Vue from 'vue'
  import {bhskus,nostock,hasstock,skucount,allNoStock,allHasStock,pideal,ajax} from '../../data/wap-service'
  import { InfiniteScroll,MessageBox } from 'mint-ui';

  Vue.use(InfiniteScroll);

  export default {
    data(){
      return {
        list:[],
        loading:false,
        page:1,
        hasNext:true,
        bhId:"",
        sellerId:"",
        bhTime:"",
        selectedItem:{},
        popupVisible:false,
        nostockRemark:"",
        unsale:[],
        checkoptions:[{"label":"已下架","value":"2"}],
        nowStock:0,
        skuNum:0,
        selected:'1',
        tab_selected:'tab1',
        searchValue:'',
        tabType:1,//1表示全部，2表示未知
        totalSku:0,
        unKnowSku:0,
        total:0
      }
    },
    watch:{
      'selected':function (val,oldval) {
        this.tabType=val;
        this.list=[];
        this.page=1;
        this.hasNext=true;
        this.loadMore();
      }
    },
    mixins:[ajax],
    created(){
      this.sellerId=this.$route.params.sellerId;
//      this.loadMore();
      this.loadTotalCount();
    },
    methods:{
      allTag(){
        console.log("all tag");
      },
      unKnowTag(){
        console.log("un know tag");
      },
      searchSku(){
        this.list=[];
        this.page=1;
        this.hasNext=true;
        this.loadMore();
      },
      loadMore(){
        if (!this.hasNext||this.loading) {
          return;
        }
        this.loading=true;
        this.doajax(bhskus,{"page":this.page,"sellerId":this.sellerId,"type":this.tabType,"skuCode":this.searchValue},(resp) => {
          this.list=this.list.concat(resp.skus);
          this.hasNext=resp.hasNext;
          this.bhId=resp.bhId;
          this.total=resp.total;
          this.page++;
        });
        this.loading=false;
      },
      hasHuo(val){
        this.selectedItem=val;
        this.doajax(hasstock,{"skuId":this.selectedItem.skuId},(resp) => {
          this.success("报货成功");
          this.selectedItem.stockInfo=1;
          this.loadTotalCount();
        });
      },
      noHuo(val){
        this.selectedItem=val;
        this.popupVisible=true;
      },
      submitNoHuo(){
        this.doajax(nostock,{"skuId":this.selectedItem.skuId,"remark":this.nostockRemark,"saleInfo":this.unsale.length>0?2:1,
          "nowStock":this.nowStock},
          (resp) => {
            this.success("报货成功");
            this.selectedItem.stockInfo=2;
            this.popupVisible=false;
            this.loadTotalCount();
          });
      },
      returnNoHuo(){
        this.popupVisible=false;
      },
      loadTotalCount(){//加载数量
        this.doajax(skucount,{"sellerId":this.sellerId},(resp) => {
          this.totalSku=resp.totalSku;
          this.unKnowSku=resp.unKnowSku;
        });
      },
      swipClicked(){
        this.success("向右滑动操作");
      },
      downExcel(){
        var ua = navigator.userAgent.toLowerCase();
        if(ua.match(/MicroMessenger/i)=="micromessenger") {
          this.success("需要在浏览器中打开");
        } else {
          window.location.href="/wapsjson/downMyExcel.htm?id="+this.sellerId;
        }
      },
      allhasstock(){
        var ua = navigator.userAgent.toLowerCase();
        if(ua.match(/MicroMessenger/i)=="micromessenger") {
          MessageBox.confirm('确定把所有未处理的都标记为有货?').then(action => {
            this.doajax(allHasStock,{"sellerId":this.sellerId},(resp) => {
              this.list=[];
              this.page=1;
              this.hasNext=true;
              this.loadMore();
              this.loadTotalCount();
            });
          });
        } else {
          this.success("请在微信中操作");
        }

      },
      allnostock(){
        var ua = navigator.userAgent.toLowerCase();
        if(ua.match(/MicroMessenger/i)=="micromessenger") {
        MessageBox.confirm('确定把所有未处理的都标记为缺货?').then(action => {
          this.doajax(allNoStock,{"sellerId":this.sellerId},(resp) => {
            this.list=[];
            this.page=1;
            this.hasNext=true;
            this.loadMore();
            this.loadTotalCount();
          });
        });
        } else {
          this.success("请在微信中操作");
        }
      },
      openKuaijie(){
        MessageBox.prompt('输入缺货与暂时少货的情况','回一句话完成报货').then(({ value, action }) => {
            //提交到后台
          if (action == 'confirm') {
            if (value == null||value=="") {
              this.error("请输入报货情况，如果不存在缺货，请输入『配齐』");
            }else{
              this.doajax(pideal,{"sellerId":this.sellerId,"remark":value},(resp) => {
                this.success("报货完成");
                this.list=[];
                this.page=1;
                this.hasNext=true;
                this.loadMore();
                this.loadTotalCount();
              });
            }
          }
        });
      }
    }
  }
</script>
<style>
  .top-msg{
    position: fixed;
    width: 100%;
    height: 6.6rem;
    z-index: 999;
    background-color: #ddd;
  }

  ul{
    padding: 0;
  }
  ul li{
    list-style-type:none;
  }
  html,body{
    height: 100%;
    width: 100%;
    margin: 0px;
  }
  .huohao{
    width: 80%;
    float: left;

  }
  .quantity{
    width: 20%;
    float: left;
  }
  .colorSize{
    font-size: 0.8rem;
    line-height: 1.8rem;
    color: #888;
  }
  .cell-div{
    width: 100%;
    padding: 0.5rem 0 0.1rem 0;
  }
  .detail-titlediv{
    background-color: #ddd;
    height: 3.5rem
  }
  .detail-titlecell{
    margin-bottom: 10px;height: 3rem
  }
  .detail-sub{
    margin-top: 2.2rem;
    margin-left:auto;
    margin-right:auto;
    width: 80%;
    text-align: center;
  }
  .detail-sub .sure-tuihuo{
    /*width: 100%;*/
    margin-right: 1.5rem;
  }
  .baohuo-no{
    width: 9rem;
    float: left;
    line-height: 3rem;
  }
  .sku-num{
    float: left;
    line-height: 3rem;
  }
  .mint-search-list{
    display: none;
  }
  /*.bh-time{*/
    /*color: #888;*/
    /*font-size: 0.8rem;*/
  /*}*/
</style>
